<template>
  <div class="resume-container">
    <el-card shadow="hover" class="main-card">
      <!-- 个人信息 -->
      <el-row :gutter="30" class="section">
        <el-col :span="6">
          <el-avatar :size="160" :src="avatar" class="profile-avatar" />
        </el-col>
        <el-col :span="18">
          <el-descriptions title="个人信息" :column="2" border>
            <el-descriptions-item label="姓名">张三</el-descriptions-item>
            <el-descriptions-item label="职位">全栈工程师</el-descriptions-item>
            <el-descriptions-item label="联系电话">138-1234-5678</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">zhangsan@example.com</el-descriptions-item>
            <el-descriptions-item label="工作经验">5年</el-descriptions-item>
            <el-descriptions-item label="Github">
              <el-link href="https://blog.example.com" target="_blank">blog.example.com</el-link>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <!-- 教育背景 -->
      <div class="section">
        <h3 class="section-title">
          <i class="el-icon-notebook-2"></i>
          教育背景
        </h3>
        <el-timeline>
          <el-timeline-item
            v-for="(edu, index) in education"
            :key="index"
            :timestamp="edu.period"
            placement="top"
            type="primary"
          >
            <el-card>
              <h4>{{ edu.school }}</h4>
              <p class="sub-info">{{ edu.major }} | {{ edu.degree }}</p>
              <p>{{ edu.description }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- 工作经历 -->
      <div class="section">
        <h3 class="section-title">
          <i class="el-icon-office-building"></i>
          工作经历
        </h3>
        <el-table :data="workExperience" stripe style="width: 100%">
          <el-table-column prop="period" label="时间" width="180"></el-table-column>
          <el-table-column prop="company" label="公司名称"></el-table-column>
          <el-table-column prop="position" label="职位"></el-table-column>
          <el-table-column label="技术栈">
            <template #default="{ row }">
              <el-tag v-for="(tech, index) in row.techStack" :key="index" class="tech-tag">
                {{ tech }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column type="expand">
            <template #default="{ row }">
              <div class="job-description">{{ row.description }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 技能专长 -->
      <div class="section">
        <h3 class="section-title">
          <i class="el-icon-data-analysis"></i>
          技能图谱
        </h3>
        <el-row :gutter="20">
          <el-col v-for="skill in skills" :key="skill.name" :span="12">
            <div class="skill-item">
              <span class="skill-label">{{ skill.name }}</span>
              <el-progress
                :percentage="skill.level"
                :color="skill.color"
                :stroke-width="16"
                :text-inside="true"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const avatar = "https://webp.debuginn.com/202303022149399.png";

const education = reactive([
  {
    school: "XX大学",
    major: "计算机科学与技术",
    degree: "硕士",
    period: "2015-2018",
    description: "研究方向：分布式系统与云计算，GPA 3.8/4.0",
  },
  {
    school: "XX大学",
    major: "软件工程",
    degree: "学士",
    period: "2011-2015",
    description: "主修课程：数据结构与算法、操作系统原理、数据库系统",
  },
]);

const workExperience = reactive([
  {
    company: "XX科技有限公司",
    position: "高级前端工程师",
    period: "2020-至今",
    techStack: ["Vue3", "TypeScript", "Node.js", "微前端"],
    description: `• 负责公司核心产品的前端架构设计与开发
    • 主导前端工程化建设，搭建CI/CD流程
    • 开发公共组件库，提升团队开发效率30%`,
  },
  {
    company: "XX信息技术有限公司",
    position: "全栈开发工程师",
    period: "2018-2020",
    techStack: ["React", "Spring Boot", "Docker"],
    description: `• 参与企业级管理系统的全栈开发
    • 实现基于RBAC的权限管理系统
    • 优化数据库查询性能，响应时间减少40%`,
  },
]);

const skills = reactive([
  { name: "Vue.js", level: 90, color: "#41b883" },
  { name: "React", level: 80, color: "#61dafb" },
  { name: "Node.js", level: 85, color: "#90c53f" },
  { name: "TypeScript", level: 88, color: "#3178c6" },
  { name: "Docker", level: 75, color: "#2496ed" },
  { name: "MySQL", level: 82, color: "#00758f" },
]);
</script>

<style lang="scss" scoped>
.resume-container {
  background: #000;
  padding: 20px;

  .main-card {
    max-width: 960px;
    border-radius: 12px;
    background: #1a1a1a;
    margin: 100px 250px;
  }
}

.section {
  margin: 30px 0;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;

  &:last-child {
    border-bottom: none;
  }

  :deep(.el-descriptions__title) {
    color: #fff;
  }
}

.section-title {
  color: #fff;
  margin-bottom: 25px;
  font-size: 1.4em;

  i {
    margin-right: 8px;
  }
}

.profile-avatar {
  margin: 0 25px;
  border: 3px solid #f0f2f5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tech-tag {
  margin: 2px;
}

.job-description {
  white-space: pre-wrap;
  line-height: 1.8;
  padding: 15px;
}

.skill-item {
  margin: 15px 0;

  .skill-label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 0.95em;
  }
}

.sub-info {
  color: #909399;
  margin: 10px 0;
}
</style>
